import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
} from 'antd';
import request from '@/utils/request';
import  moment from 'moment'
import L from 'leaflet';   //引入leaflet
import './index.less';
import './../Home/leaflet.less';
import P1 from './../../images/tlf_gis_cad2.svg';
// import P1 from './../../images/p1.png';
import BuildModalTitle from '@/components/BuildModalTitle';
import {  afterCloseModal } from '@/utils/utils';
import debounce from 'lodash/debounce';

class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    const that=this;
    that.renderMap();

  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    if( this.timer){
      clearInterval( this.timer)
    }
  }
  renderMap=()=>{
    var map = this.map=L.map('CADDIV', {
      crs: L.CRS.Simple,
      zoom: 1,
      zoomSnap: 1,
    });
    var bounds = [[0, 0], [720, 1024]];
    var image = L.imageOverlay(P1, bounds).addTo(map);
    map.fitBounds(bounds);

    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgElement.setAttribute('viewBox', '52 44 1573 976');
    svgElement.innerHTML = `
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M350 805L660 805" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
     <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M1030 800L1200 800" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M1040 350L1130 350" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M760 350L860 350" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    `;
    // L.svgOverlay(svgElement, bounds).addTo(map);

    map.on('click', function(e) {
      console.log(e.latlng.toString());
      return false;
    });
    map.flyTo([360, 512])
    map.on('zoomend', function(e) {
      console.log(map.getZoom());
    });
  }
  render() {
    return <div style={{height:'100%',position:'relative'}}>
      <div id={'CADDIV'} style={{
        display: 'flex',
        fontSize: '30px',
        height: '80vh',
        width:'100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      </div>
    </div>;
  }
}

export default BasicList;
